<template>
  <div>
    <el-space>
      <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
      <el-input
        v-model="searchParams.keyStr"
        placeholder="报价名称"
        style="margin-right: 10px"
      />
      <el-button type="primary" :icon="Search" @click="getData">搜索</el-button>
      <el-button :icon="Refresh" @click="reset">重置</el-button>
      <el-button
        type="danger"
        :icon="Delete"
        :disabled="selections.length == 0"
        @click="handleDelete"
        >删除</el-button
      >
    </el-space>
    <el-table
      border
      :data="listData"
      style="margin-top: 10px; min-height: 66vh"
      v-loading="loading"
      row-key="id"
      @selection-change="selections = e"
    >
      <el-table-column type="selection" />
      <el-table-column type="index" label="" />
      <el-table-column width="200" label="报价方式" prop="AttrName" />
      <el-table-column label="单程计算公式" prop="AttrValue" />
      <el-table-column width="200" label="备注" prop="AttrRemark" />
      <!-- <el-table-column width="200" label="默认" prop="IsDefault">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.IsDefault"
            @change="(v) => handleSwitch(v, row)"
          ></el-switch>
        </template>
      </el-table-column> -->
      <el-table-column width="200" label="操作" align="center">
        <template v-slot="{ row }">
          <el-button link type="primary" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button link type="danger" @click="handleDelete(row.AttrId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <QuotationEditModal
      :isUpdate="isUpdate"
      :open="openEdit"
      :data="currentData"
      @closeModal="openEdit = false"
      @reload="reload"
    />
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { Plus, Refresh, Search, Sort, Delete } from "@element-plus/icons-vue";
import Sortable from "sortablejs";
import { createUniqueString } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import QuotationEditModal from "./QuotationEditModal.vue";
import {
  offerQueryApi,
  offerUpdateApi,
  offerRemoveApi,
} from "@/api/order/attr/index.js";
import useOrderAttrStore from "@/store/modules/orderAttrs";
let orderAttrStore = useOrderAttrStore();
const searchParams = ref({
  keyStr: "",
  pageNum: 1,
  pageSize: 10,
  seriesId: 0,
});
const listData = ref([]);
const openEdit = ref(false);
const isUpdate = ref(false);
const loading = ref(false);
const currentData = ref({});
const selections = ref([]);
watch(
  () => orderAttrStore.currentProductSeries.SeriesId,
  (val) => {
    if (val && !searchParams.value.seriesId) {
      searchParams.value.seriesId =
        orderAttrStore.currentProductSeries.SeriesId;
      getData();
    }
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  // getData();
});
async function getData() {
  try {
    loading.value = true;
    const res = await offerQueryApi(searchParams.value);
    searchParams.value.total = res.TotalCount;
    listData.value = res.Data;
  } catch (error) {
  } finally {
    loading.value = false;
  }
}
function handleEdit(row) {
  isUpdate.value = true;
  openEdit.value = true;
  currentData.value = Object.assign({}, row);
}
function handleAdd() {
  isUpdate.value = false;
  openEdit.value = true;
  currentData.value = {
    quotationMode: "",
    formula: "",
    remark: "",
    sort: "",
    isDefault: 1,
  };
}
async function reload(data, update) {
  searchParams.value.keyStr = "";
  data.seriesId = searchParams.value.seriesId;
  const res = await offerUpdateApi(data);
  if (res.IsSuccess) {
    ElMessage.success(update ? "修改成功" : "新增成功");
    getData();
  }
}

function handleDelete(id) {
  ElMessageBox.confirm("确认删除？", "提示", {
    type: "warning",
  })
    .then(async (res) => {
      if (searchParams.value.total > 1) {
        if (typeof id == "number") await offerRemoveApi([id]);
        else await offerRemoveApi(selections.value.map((e) => e.AttrId));
        ElMessage.success("删除成功");
        getData();
      } else {
        ElMessage.warning("至少保留一条数据");
      }
    })
    .catch((error) => {
      console.log(error);
    });
}
async function handleSwitch(val, data) {
  try {
    await offerUpdateApi({
      ...data,
      IsDefault: val,
      seriesId: searchParams.value.seriesId,
    });
    getData();
    ElMessage.success("修改成功");
  } catch (error) {
    ElMessage.error("修改失败:" + error);
  }
}
function reset() {
  searchParams.value.keyStr = "";
  getData();
}
</script>